<!--
 * @Author: gaoyu gy15354315043@163.com
 * @Date: 2024-10-15 17:05:23
 * @LastEditors: gaoyu gy15354315043@163.com
 * @LastEditTime: 2024-11-25 10:01:00
 * @Description: 小铃铛
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<template>
    <div class="unreadMessage" @click='handleNoticeDetail'>
        <el-badge :value="unReadCount || 0" class="item" v-if="unReadCount > 0">
            <el-icon>
                <Bell />
            </el-icon>
        </el-badge>
        <div v-else>
            <el-icon>
                <Bell />
            </el-icon>
        </div>
    </div>
    <MessageList ref="MessageListRef" />
</template>
<script lang="ts" setup>
import { useWebsocketStore } from '@/framework/store/modules/websocket';
import MessageList from './components/unreadmessage-list.vue'
import mitt from '../../../../utils/mitt'
import { unReadMessage } from '../api/index'
const websocketStore = useWebsocketStore()
const MessageListRef = ref()
const unReadCount = computed(() => websocketStore.isUnReadMessage)
onMounted(() => {
    initUnReadMessage()
})
/**
 * @description: 更新小铃铛
 * @return {*}
 */
async function initUnReadMessage(): Promise<void> {
    const res = await unReadMessage()
    websocketStore.setIsUnReadMessage(res.data)
}
/**
 * @description:  点击小铃铛 查看未读消息
 * @return {*}
 */
const handleNoticeDetail = (): void => {
    mitt.emit('closeNineGrid')
    if (!MessageListRef.value) return
    MessageListRef.value.initData()
}
</script>
<style scoped lang="scss">
.unreadMessage {
    color: #fff;
    margin: 0 16px;
    height: 16px;
    line-height: 16px;
    cursor: pointer;

    :deep(.el-badge__content) {
        width: 18px;
        height: 12px;
        font-size: 10px;
        border: none;
        padding: 0 3px;
    }
}
</style>
